<template>
    <div class="restaurant-detail-page">
    <div class="restaurant-header">
        <img :src='restaurant.image' class="restaurant-image" alt="diguoji.jpg"/>
        <div class="restaurant-info">
            <h1 style="color: grey;">{{ restaurant.name }}</h1>
            <p>{{ restaurant.address }}</p>
            <el-rate v-model="restaurant.rating" disabled/>
            <el-button type="primary">立即下单</el-button>
        </div>
    </div>
    <div class="menu-recommend">
        <h2>菜品推荐</h2>
        <el-row :gutter="20">
            <el-col :span="4" v-for="dish in restaurant.menu" :key="dish.id">
                <el-card class="menu-item">
                    <img :src="dish.image" class="menu-image" alt="dish-image"/>
                    <div class="menu-info">
                        <h3>{{ dish.name }}</h3>
                        <p>${{ dish.price }}</p>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
    <div class="comment">
        <h2>用户评价</h2>
        <el-rate v-model="userRating" showtext allow-half/>
        <el-input type="textarea" v-model="userComment" placeholder="请输入您的评价"/>
        <el-button type="primary">提交评价</el-button>
    <div class="comment-list">
        <el-card v-for="comment in comments" :key="comment.id" class="comment-card">
            <div class="commment-header">
                <h3>{{ comment.username }}</h3>
                <el-rate v-model="comment.rating" disabled show-text/>
            </div>
            <p>{{ comment.content }}</p>
        </el-card>
    </div>
    </div>
</div>
</template>
<script lang="ts" setup>
import { Comment } from 'vue';
import {ref} from 'vue';
const restaurant=ref({
    id:1,
    name:"巫氏三胖",
    address:"华津南路翰林公馆",
    rating:5.0,
    image:"src/static/diguoji.jpg",
    menu:[
        {id:1,name:"鸡杂",price:25,image:"src/static/diguoji.jpg"},
        {id:2,name:"纸包鱼",price:84,image:"src/static/diguoji.jpg"},
        {id:3,name:"地锅鸡",price:83,image:"src/static/diguoji.jpg"},
        {id:4,name:"糯米藕",price:9.9,image:"src/static/diguoji.jpg"},
        {id:5,name:"烧烤套餐",price:84,image:"src/static/diguoji.jpg"},
        {id:6,name:"酸梅汤",price:15,image:"src/static/diguoji.jpg"},
    ]
});
const userRating=ref(0);
const userComment=ref("");
//用户评价数据
const comments=ref([
    {id:1,username:"zc",rating:5.0,content:"太好吃了!"},
    {id:2,username:"wwy",rating:4.5,content:"确实好吃!"}
])
</script>
<style scoped>
.restaurant-detail-page{
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background-color: aliceblue;
    background-size: cover;
    background-position: center center;
}
.restaurant-header{
    width: 80%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px auto;
    background-color: bisque;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 40px 12px rgb(0,0,0,0.1);
}
.menu-recommend{
    margin-bottom: 40px;
}
.menu-item{
    width: 100%;
    height: 150px;
    margin-top: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    object-fit: cover;
}
.restaurant-image{
  width:100%;
  height:240px;
  object-fit: contain;/*保持图片比例 */
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.menu-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}
.comment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.comment-list {
  margin-top: 20px;
}
.comment-card {
  margin-bottom: 20px;
}
h2,p{
    color: grey;
}
</style>